import { useParams } from "react-router-dom"
import { MyHead } from "../../../components/head"
import { useState, useEffect, useRef } from 'react'
import { userCol, userLikes } from "../../../api/AddMs";
import { useSelector } from "react-redux";
import { RootReducer } from "../../../types/store";
import { useTiaoZhuan } from "../../../hooks/routers";
import { Dropdown, DropdownRef } from "antd-mobile";
import MyListTwo from "../../../components/myListLikes";
import { CheckOutline } from 'antd-mobile-icons'
const MYLikes = () => {
    const params = useParams();
    const titles = params.title == '1' ? '我的收藏' : (params.title == '2' ? '我的点赞' : '404')

    const userData = useSelector<RootReducer, foundUserType | null>(s => s.MyData.userData)
    const { Tz } = useTiaoZhuan();
    const [data, setData] = useState<getUserTypes[]>([])
    const [olddata, setOldData] = useState<getUserTypes[]>([])

    const [hotSort, setHotSort] = useState(0);
    const [timeSort, setTimeSort] = useState(-1);
    const [hotTitle, setHotTitle] = useState('热度排序')
    const [timeTitle, setTimeTitle] = useState('时间排序')
    const [activeKey, setActiveKey] = useState('hotSort')
    const [hot,sethot] = useState(true)
    const ref = useRef<DropdownRef>({} as DropdownRef)
    const getData = async () => {
        console.log(params.title, typeof params.title);

        switch (params.title) {
            case '2':
                let res = await userLikes(userData!.phone)
                console.log(res);
                
                setData(res.result)
                setOldData([...res.result])

                break;
            case "1":
                
                let res2 = await userCol(userData!.phone)
                console.log(res2);

                setData(res2.result)
                setOldData([...res2.result])
                break;
            default:
                break;
        }
    }
    // 热度排序
    const ArraySortHotone = (a:getUserTypes,b:getUserTypes)=>{
        return a.msobj.hot - b.msobj.hot
    }
    const ArraySortHottwo = (a:getUserTypes,b:getUserTypes)=>{
        return b.msobj.hot - a.msobj.hot
    }
    // 时间排序
    const ArraySortTimeone = (a:getUserTypes,b:getUserTypes)=>{
        return (new Date(a.msobj.time).getTime()) - (new Date(b.msobj.time).getTime())
    }
    const ArraySortTimetwo = (a:getUserTypes,b:getUserTypes)=>{
        return (new Date(b.msobj.time).getTime()) - (new Date(a.msobj.time).getTime())
    }
    useEffect(() => {
        if (userData == null) {
            Tz('/homes/my')
        }
        getData()
        
    }, [])
    // 热度监听
    useEffect(() => {
        if(hotSort == 1){
            setData([...data.sort(ArraySortHotone)])
            sethot(true)
        }else if(hotSort == 2){
            setData([...data.sort(ArraySortHottwo)])
            sethot(true)
        }else if(hotSort ==0){
            setData([...olddata])
        }
        ref.current.close()
    }, [hotSort])
    // 时间监听
    useEffect(() => {
        if(timeSort == 1){
            setData([...data.sort(ArraySortTimeone)])
            sethot(false)
        }else if(timeSort == 2){
            setData([...data.sort(ArraySortTimetwo)])
            sethot(false)
        }else if(timeSort ==0){
            setData([...olddata])
        }
        ref.current.close()
    }, [timeSort])

    return (
        <div style={{ height: '100%' }}>
            <MyHead title={titles!} />
            <Dropdown style={{ paddingTop: 50 }} closeOnMaskClick ref={ref} defaultActiveKey={activeKey}>
                <Dropdown.Item key='hotSort' title={hotTitle} style={{color:activeKey=='hotSort'?"#f50":''}}>
                    <div style={{ padding: 12 }}>
                        <div onClick={() => { setHotSort(0); setHotTitle('热度排序');setTimeSort(-1);setActiveKey('hotSort') }} style={{ fontSize: 16, color: hotSort == 0 ? '#f50' : '#666', height: 30, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span style={{ marginLeft: 10 }}>热度默认</span>   {hotSort == 0 && <CheckOutline />}
                        </div>
                        <div onClick={() => { setHotSort(1); setHotTitle('热度升序');setTimeSort(-1);setActiveKey('hotSort') }} style={{ fontSize: 16, color: hotSort == 1 ? '#f50' : '#666', height: 30, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span style={{ marginLeft: 10 }}>热度升序</span>   {hotSort == 1 && <CheckOutline />}
                        </div>
                        <div onClick={() => { setHotSort(2); setHotTitle('热度倒序');setTimeSort(-1);setActiveKey('hotSort') }} style={{ fontSize: 16, color: hotSort == 2 ? '#f50' : '#666', height: 30, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span style={{ marginLeft: 10 }}>热度倒序</span>   {hotSort == 2 && <CheckOutline />}
                        </div>
                    </div>
                </Dropdown.Item>
                <Dropdown.Item key='timeSort' title={timeTitle} style={{color:activeKey=='timeSort'?"#f50":''}}>
                    <div style={{ padding: 12 }}>
                        <div onClick={() => { setTimeSort(0); setTimeTitle('时间排序');setHotSort(-1);setActiveKey('timeSort') }} style={{ fontSize: 16, color: timeSort == 0 ? '#f50' : '#666', height: 30, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span style={{ marginLeft: 10 }}>时间默认</span>   {timeSort == 0 && <CheckOutline />}
                        </div>
                        <div onClick={() => { setTimeSort(1); setTimeTitle('时间升序');setHotSort(-1);setActiveKey('timeSort') }} style={{ fontSize: 16, color: timeSort == 1 ? '#f50' : '#666', height: 30, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span style={{ marginLeft: 10 }}>时间升序</span>   {timeSort == 1 && <CheckOutline />}
                        </div>
                        <div onClick={() => { setTimeSort(2); setTimeTitle('时间倒序');setHotSort(-1);setActiveKey('timeSort') }} style={{ fontSize: 16, color: timeSort == 2 ? '#f50' : '#666', height: 30, lineHeight: '30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span style={{ marginLeft: 10 }}>时间倒序</span>   {timeSort == 2 && <CheckOutline />}
                        </div>
                    </div>
                </Dropdown.Item>
            </Dropdown>
            <div>
                <MyListTwo list={data} hasAudio={true} isHot={hot} isTime={!hot} ></MyListTwo>
            </div>
        </div>
    )
}

export default MYLikes